<template>
  <div>
      <a href="https://juejin.cn/post/6928468842377117709">vuex</a>
  </div>
</template>
<script>
import { mapMutations, mapState, mapGetters, mapActions } from "vuex"; // 从vuex中导入mapState
export default {
  data() {
    return {
        
    };
  },
  async mounted() {
    // console.log(this.name); //访问计算属性不需要加括号
    // console.log(this.list);
    // console.log(this.number);
    // console.log(this.getMessage);
    this.setNumber({ number: 999 });
    //  this.$store.commit('setNumber', {number:666});
    // console.log(this.number);
    // await this.$store.dispatch("setAge",{age:19});
    await this.setAge({ age: 20 });
    // console.log(this.age);
  },
  computed: {
    //   获取state中的值
    ...mapState(["name"]), // 经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
    ...mapState(["list"]),
    ...mapState(["number"]),
    ...mapState(["age"]),
    // ...mapState({ aliasName: 'name' }),  // 赋别名的话，这里接收对象，而不是数组

    // 获取getter  直接返回的新的字段，与之前的字段互不感染
    ...mapGetters(["getMessage"]),

    // 修改值
  },
  methods: {
    // 注意，mapMutations是解构到methods里面的，而不是计算属性了
    ...mapMutations(["setNumber"]),
    
    
    // 将Action结构到method中
    ...mapActions(["setAge"]),
  },
};
</script>
<style scoped>
</style>
